<!--
 * @Author: wwssaabb
 * @Date: 2021-06-26 09:39:15
 * @LastEditTime: 2021-06-28 17:13:30
 * @FilePath: \demo\todo_list\src\views\todoList.vue
-->
<template>
  <div class="page w-screen h-screen pt-8 overflow-hidden">
    <h1 class="m_font m_tilte text-7xl text-blod mb-8 text-center">ToDo List</h1>
    <input type="text" v-model="task" placeholder="添加一个任务吧！" class="block m_font m_shadom w-1/2 h-16 text-2xl text-center tracking-widest outline-none rounded-2xl mx-auto mb-6 focus:animate-ping" @keydown="createToDoItem">
    <div class="m_font text-xl w-2/3 mx-auto text-blue-400 text-right mb-6 pr-8 select-none">已完成 {{completedCount}} / {{totalCount}}</div>
    <div class="list w-2/3 h-2/3 mx-auto rounded-2xl overflow-y-auto p-4">
      <todoItemVue :todoItem="i" v-for="i in list" :key="i.id"></todoItemVue>
    </div>
  </div>
</template>

<script lang="ts">
import todoItemVue from '../compontents/todoItem.vue';
import { computed, defineComponent, ref } from 'vue'
import { TodoItem } from '@/store/state';
import { MutationType } from '@/store/mutations';
import { useStore } from 'vuex';

export default defineComponent({
  components:{
    todoItemVue
  },
  setup () {
    const store=useStore()
    const task = ref('')
    const list=store.state.todoList

    //创建todoItem
    const createToDoItem=(e:any)=>{
        if(e.keyCode!==13||task.value === ''){
          return 
        }else{
          const item:TodoItem={
            id:Date.now(),
            task:task.value,
            completed:false
          }
          store.commit(MutationType.CreateItem,item)
          task.value=''
        }
    }
    
    //总个数
    const totalCount=computed(()=>{
      return store.getters.totalCount
    })
    //完成个数
    const completedCount=computed(()=>{
      return store.getters.completedCount
    })

    return {task,list,createToDoItem,totalCount,completedCount}
  }
})
</script>

<style scoped>
  .page{
    background: #e4ebf5;
  }
  .m_font{
    font-family: 'MedievalSharp', '黑体' , cursive ;
    text-shadow:.5rem .2rem .7rem #c8d0e7, -.6rem -.2rem .8rem #fff;
  }
  .m_tilte{
    color: transparent;
    font-weight: 900;
    background: linear-gradient(45deg,#e4ebf5,#f87171,#87e8f5,#e4ebf5,#a98bfc,#87e8f5,#e4ebf5,#f87171,#e4ebf5);
    background-clip: text;
    background-position: 0%;
    background-size: 300%;
    animation: gb_run 30s linear infinite;
  }
  @keyframes gb_run{
    0%{background-position: 0%;}
    100%{background-position: -300%;}
  }

  .m_shadom{
    background: #f8f8f8;
    box-shadow:inset .5rem .2rem .7rem #c8d0e7,inset -.8rem -.3rem .5rem #fff;
  }
  input:focus{
    box-shadow: .5rem .2rem .7rem #c8d0e7, -.4rem -.4rem 1.2rem #fafafa;
  }
  .list{
    background: #e4ebf5;
    box-shadow:.5rem .3rem .7rem #c8d0e7, -.6rem -.3rem 1.4rem #fff;
  }
  div.list::-webkit-scrollbar{
    width: 10px;
    background:#fff;
    
  }
  div.list::-webkit-scrollbar-thumb{
    background: #e6e6e6;
    border-radius: 3px;
  }
  div.list::-webkit-scrollbar-button{
    background:#e6e6e6;

  }
</style>